<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            width: 250px;
            border: solid 1px #ccc;
            border-bottom: none;
        }

        ul li .title {
            background-color: antiquewhite;
        }
        ul li {
            overflow: hidden;
            border-bottom: solid 1px #ccc;
            padding-bottom: 5px 0;
        }

        ul li span {
            float: left;
            width: 60px;
        }
    </style>
    <script src="../lib/jquery-1.11.3.min.js"></script>
</head>

<body>
    <ul id="ul">
        <li><span></span><span></span></li>
        <li><span></span><span></span></li>
        <li><span></span><span></span></li>
        <li><span></span><span></span></li>
        <li><span></span><span></span></li>
        <li><span></span><span></span></li>
    </ul>
    <script>
        var stus = [{
            name: '张三',
            sex: '女',
            score: 50
        }, {
            name: '李四',
            sex: '男',
            score: 60
        }, {
            name: '王二',
            sex: '男',
            score: 70
        }, {
            name: '刘明',
            sex: '女',
            score: 80
        }, {
            name: '李海',
            sex: '女',
            score: 90
        }]
        // 1.便利数组对象，得到某一条数据
        var HTML = '<li class="title"><span>姓名</span><span>性别</span><span>分数</span><span>操作</span></li>'
        var content=''

        function loadData() {
            $.each(stus, function (index, data) {
                content += '<li><span>' + data.name + '</span><span>' + data.sex + '</span><span>' + data.score + '</span><span class="del">删除</span></li>'
            })
            $('#ul').html(HTML+content)
        }

        $(function () {
            loadData()
            $('del').on('click', function () {
                var i = $(this).index()
                stus.splice(i, 1)
                loadData()
            })
        })

        function del(index){
            stus.splice(index,1)
            loadData()
        }

    </script>
</body>

</html>